<template >
    <div class="app1">
        <div class="tbar">
            <a href="javascript:;"
                class="link-btn el-button el-button--primary el-button--small">选择文件
                <input type="file"
                    @change="onChooseFile" />
            </a>

            <el-button type="primary"
                size='small'
                @click="onSubmit">提交</el-button>
            <el-button type="primary"
                size='small'
                @click="onGetFirstTen">获取前10个</el-button>
            <el-button type="primary"
                size='small'
                @click="onClear">清空</el-button>

        </div>
        <div class="table">
            <el-table :data="words"
                style="100%"
                border>
                <el-table-column fixed
                    prop="num"
                    label="编号"
                    align='center'
                    width="50">
                </el-table-column>
                <el-table-column prop="word"
                    label="单词"
                    align='left'
                    width="150">
                </el-table-column>
                <el-table-column prop="msg"
                    label="信息"
                    align='left'
                    width="300">
                </el-table-column>
                <el-table-column fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="onDel(scope.$index)"
                            type="text"
                            size="small">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" src="./ShanbayImportFromYoudao.ts">
</script>

<style scoped  lang="scss">
.app1 {
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0px;
  .tbar {
    height: 65px;
    padding: 10px 0 10px 0;
    width: 600px;
    margin: auto;
    text-align: center;
    top: 10px;
    .link-btn {
      position: relative;
      overflow: hidden;
      text-decoration: none;
      top: 12px;
      height: 32px;
      text-indent: 0;
      input {
        position: absolute;
        right: 0px;
        left: 0px;
        bottom: 0px;
        top: 0px;
        opacity: 0;
      }
    }
  }
  .table {
    height: calc(100% - 110px);
    padding: 10px 0 10px 0;
    width: 600px;
    margin: auto;
    overflow-y: auto;
    text-align: center;
  }
}
</style>
